<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/neighbor-share.css" />
	<style type="text/css">
		.mescroll-downwarp {
			background-color: #eee;
		}
	</style>
</head>

<body>
	<div id="app" class="app">
		<div id="mescroll" class="mescroll">
			<div>
				<div class="content">
					<div class="highlight"></div>
					<div class="item p-b-20">
						<div class="unser">
							<!--用户昵称-->
							<div class="item-portrait">
								<img :src="detailData.icon || '../../../images/user/moren.png' "  alt="" />
							</div>
							<span class="user-name" v-text="detailData.periNickname || '小区住户' "></span>
						</div>


						<div class="desc">
							<!--发布文本内容-->
							<div class="desc-text font-14 font-c-14 m-b-10" v-text="detailData.dynDetails"></div>
							<!--发布的图片-->
							<div class="desc-image m-b-10">
								<img v-for="(son,index) in detailData.filesList" class="image" @click="lookImgTap(detailData.filesList,index)" :src="son.filesPath"
								/>
							</div>
							<!--点赞和评论数-->
							<div class="warpper">
								<div class="desc-time font-c-7f">发布于{{detailData.dynCD | timeago}}</div>
								<div class="operation-warpper">
									<!-- <div class="">
										<img src="../images/pinglun.png">{{detailData.commentNumber}}
									</div> -->
									<div class="like" @click="likeCalick(detailData.isLike)">
										<img :src="detailData.isLike==0?'../images/zan_n.png': '../images/zan_y.png' "> {{detailData.likeNumber}}
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="highlight"></div> -->
					<!-- <div class="comment">
						<ul class="mui-table-view" v-if="detailData.dynCommentsList && detailData.dynCommentsList.length > 0">
							<li class="mui-table-view-cell item" v-for="item in detailData.dynCommentsList">
								<div class="img">
									<img :src="item.icon || '../../../images/user/moren.png' ">
								</div>
								<div class="comment-desc">
									<div class="info">
										<span v-text="item.periNickname || '某吃瓜群众' "></span>
										<span class="font-12 font-c-ad">{{item.comCD | timeago}}</span>
									</div>
									<div class="text font-14 font-c-7f m-t-10" v-text="item.comDetails"></div>
								</div>
							</li>
						</ul>
						<div v-else class="font-12 font-c-ad m-t-15" style="text-align: center;">暂无评论~</div>
						<div v-if="detailData.dynCommentsList && detailData.dynCommentsList.length > 0" class="font-12 font-c-ad m-t-15" style="text-align: center;">没有更多了</div>
					</div> -->
				</div>
			</div>
		</div>
		<!-- 输入框 -->
		<!-- <div class="bottom-textarea">
			<textarea id="textarea" class="textarea" v-model="comDetails" placeholder="说点什么吧!"></textarea>
			<div class="send" @click="sendTap">发送</div>
		</div> -->
	</div>
	<script src="../../../js/Width.js"></script>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/mescroll.min.js"></script>
	<script src="../../../js/vue.js"></script>
	<script src="../../../js/Util.js"></script>
	<script src="../../../data-js/home.js"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init({
			swipeBack:true, //启用右滑关闭功能
			beforeback: function () {
				//获得列表界面的webview
				var list = plus.webview.currentWebview().opener();
				//触发列表界面的自定义事件（refresh）,从而进行数据刷新
				mui.fire(list, 'issueBack');
				//返回true，继续页面关闭逻辑
				return true;
			}
			
		})
		var mescroll;
		mui.plusReady(function () {
			if (mui.os.ios) {
				FastClick.attach(document.body);
				plus.webview.currentWebview().setStyle({
					softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度
				});
			}
			mescroll = new MeScroll("mescroll", {
				down: {
					callback: downCallback //下拉刷新的回调
				}
			});
		})
		var app = new Vue({
			el: "#app",
			data: {
				detailData: {},
				comDetails: '',
				send: false
			},
			filters: {
				timeago: function (value) {
					return Util.timeago(value)
				}
			},
			methods: {
				likeCalick: function (type) {
					var dynID = this.detailData.dynID
					if (type == 0) {
						this.detailData.isLike = 1;
						this.detailData.likeNumber = this.detailData.likeNumber + 1;
						Util.AddLikes(dynID)
					} else {
						this.detailData.isLike = 0;
						this.detailData.likeNumber = this.detailData.likeNumber - 1;
						Util.DeleteLikes(dynID)
					}
				},
				lookImgTap: function (lists, index) {
					var list = []
					lists.forEach(function (item, num) {
						list.push(item.filesPath)
					})
					plus.nativeUI.previewImage(list, {
						current: index
					})
				},
				sendTap: function () {
					var that = this
					var comDetails = this.comDetails
					if (!comDetails) {
						mui.toast('请输入内容')
						return
					}
					var dynID = this.detailData.dynID
					document.getElementById("textarea").blur(); //焦点，关闭软键盘 
					mui.post(Util.HTTP + 'api/Comments/AddComments', {
						dynID: dynID,
						userID: Util.getState('$state').userID,
						comDetails: comDetails
					}, function (res) {
						if (res.code == 1001) {
							mui.toast('评论成功!')
							that.comDetails = ''
							downCallback()
						}
					})
				}
			},
		})


		function downCallback() {
			var dynID = plus.webview.currentWebview().dynID;
			mui.post(Util.HTTP + 'api/Dynamics/GetDynamicsDetails', {
				userID: Util.getState('$state').userID,
				dynID: dynID
			}, function (res) {
				if (res.code == 1001) {
					mescroll.endErr();
					app.detailData = res.data
				} else {
					mui.toast(res.message)
				}
			})
		}
	</script>
</body>

</html>




